<template>
	<div class='user-home-parent'>
		<TopNav
			navName="个人中心"
			color="#00493E"
			msgColor="#01937C"
			showSetting
		/>
		<div class="container">
			<div class="left">
				<div class="title">个人信息</div>
				<UserInfo />
			</div>
			<div class="right">
				<div>
					<div class="title">社区荣誉</div>
					<div
						class="honors"
					>
						<div
							class="honor"
							v-for="honor in honors"
							:key="honor"
						>
							<img :src="honor">
						</div>
					</div>
				</div>
				<div>
					<div class="title">玩具改造状况</div>
					<div class="results">
						<Tag
							class="item"
							v-for="item in results"
							:key="item.label"
							bgColor="#FBFBFB"
							width="250px"
							height="170px"
						>
							<div>
								<div class="label">{{item.label}}</div>
								<div class="value">{{item.value}}</div>
							</div>
						</Tag>
					</div>
				</div>
				<div>
					<div class="title">改造进行中</div>
					<div class="transforms">
						<img
							class="item"
							v-for="item in transforming"
							:key="item.label"
							:src="item"
						>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import UserInfo from './components/UserInfo'

export default {
  components: {
    UserInfo
  },
  data() {
    return {
      honors: [
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312163130903-image 1.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312163130903-image 2.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312163130903-image 4.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312163130903-image 5.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312163130903-image 6.png',
      ],
      results: [
        { label: '改造成功', value: 10 },
        { label: '捐赠玩具', value: 4 },
        { label: '交换玩具', value: 3 },
      ],
      transforming: [
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/course/20220308165049237-Group 42.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/course/20220308165049237-Group 29.png',
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/course/20220308165049237-Group 43.png'
      ]
    }
  },
  computed: {

  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
.user-home-parent {
  padding-top: 78px;
  background-color: $bgColor1;

  .container {
    display: flex;
    padding: 40px 60px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .title {
      margin-bottom: 20px;
      font-size: $sLarge;
      color: rgba(0, 62, 52, 0.7);
    }

    .right {
      flex: 1;
      margin-left: 50px;

      .honors {
        display: flex;
        padding: 25px 30px;
        margin-bottom: 35px;
        background-color: #fbfbfb;
        border-radius: $rMiddle;

        .honor:not(:last-of-type) {
          margin-right: 50px;
        }
      }

      .results {
        display: flex;
        margin-bottom: 35px;

        .item {
          &:not(:last-of-type) {
            margin-right: 25px;
          }

          flex: 1;

          .label {
            margin-bottom: 20px;
            font-size: $sLarge;
            color: rgba(0, 62, 52, 0.6);
          }

          .value {
            font-size: 50px;
            color: $primary2;
          }
        }
      }

      .transforms {
        display: flex;

        img {
          width: 180px;
          margin-right: 30px;
        }
      }
    }
  }
}
</style>
